<template>
	<div class="image_text_cover">
		<div :style="textConStyle(coverItem)">
			<template v-if="coverItem?.text?.main?.originData?.length">
				<div class="text_item" :style="textItemStyle(word_item)" v-for="(word_item, word_index) in coverItem?.text?.main?.originData[0]?.list" :key="word_index">
					<div :style="wordStyle(word_item)">{{word_item.copywriting}}</div>
				</div>
			</template>
			
			<div class="back_con single_image" :style="`--backImage: url(${coverItem?.image[0]?.url})`" v-if="coverItem?.image_tpl == 'single_image' && coverItem?.image?.length">
			</div>
			
			<div class="back_con couple_image_9_16" v-if="coverItem?.image_tpl == 'couple_image_9_16' && coverItem?.image?.length">
				<div class="image_item" 
					v-for="(image_item, image_index) in coverItem?.image"
					:style="`--backImage: url(${image_item?.url})`">
				</div>
			</div>
			
			<div class="back_con couple_image_16_9" v-if="coverItem?.image_tpl == 'couple_image_16_9' && coverItem?.image?.length">
				<div class="image_item" 
					v-for="(image_item, image_index) in coverItem?.image"
					:style="`--backImage: url(${image_item?.url})`">
				</div>
			</div>
			
			<div class="back_con couple_image_1_1" v-if="coverItem?.image_tpl == 'couple_image_1_1' && coverItem?.image?.length">
				<div class="image_item" 
					v-for="(image_item, image_index) in coverItem?.image"
					:style="`--backImage: url(${image_item?.url})`">
				</div>
			</div>
			
			<div class="back_con four_image_9_16" v-if="coverItem?.image_tpl == 'four_image_9_16' && coverItem?.image?.length">
				<div class="image_item" 
					v-for="(image_item, image_index) in coverItem?.image"
					:style="`--backImage: url(${image_item?.url})`">
				</div>
			</div>
			
			<div class="back_con four_image_1_1" v-if="coverItem?.image_tpl == 'four_image_1_1' && coverItem?.image?.length">
				<div class="image_item" 
					v-for="(image_item, image_index) in coverItem?.image"
					:style="`--backImage: url(${image_item?.url})`">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	const radioValue = 4
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		nextTick,
		computed,
		watch,
		onBeforeUnmount,
		onMounted
	} from "vue";
	export default defineComponent({
		props: {
			coverItem: {
				type: Object,
				default: ()=>{return {}}
			}
		},
		setup(props, context) {
			const customFont = (name, url) => {
				const fontFace = new FontFace(name, `url(${url})`);
				fontFace.load().then(() => {
					document.fonts.add(fontFace);
				}).catch((error) => {	
					console.error(error);
				});
			}
			const getRatio = (imageArr, image_tpl) => {
				let radioType = '1:1'
				let currentRadioHeight = 0
				if(image_tpl == 'couple_image_1_1' || image_tpl == 'four_image_1_1'){
					radioType = '1:1'
				} else if(image_tpl == 'couple_image_9_16' || image_tpl == 'four_image_9_16'){
					radioType = '9:16'
				} else if(image_tpl == 'couple_image_16_9'){
					radioType = '16:9'
				} else {
					if(imageArr?.length){
						radioType = `${imageArr[0]?.width}:${imageArr[0]?.height}`
						currentRadioHeight = 360 / imageArr[0]?.width * imageArr[0]?.height
					}
				}
				return {
					radioType,
					currentRadioHeight,
				}
			}
			const textConStyle = computed(()=>{
				return function(item) {
					let {
						radioType,
						currentRadioHeight,
					} = getRatio(item?.image, item?.image_tpl)
					
					let radioHeight = radioType == '1:1'?360:radioType == '16:9'?202.5:radioType == '9:16'?640:currentRadioHeight
					return {
						position: 'relative',
						backgroundSize: '100% auto',
						backgroundPosition: 'center center',
						backgroundRepeat: 'no-repeat',
						width: 360/radioValue + 'px',
						height: radioHeight/radioValue + 'px'
					}
				}
			})
			const wordStyle = computed(() => {
				return function(item) {
					return {
						'font-family': item.font_family,
						'font-size': item.font_size/radioValue + 'px',
						'width': item.width/radioValue + 'px',
						'height': item.height/radioValue + 'px',
						'color': item.color,
						'white-space': 'nowrap',
						'line-height': item.height/radioValue + 'px'
					}
				}
			})
			const textItemStyle = computed(()=>{
				return function(item) {
					customFont(item?.font_family, item?.typeface)
					return {
						'position': 'absolute',
						'width': item.width/radioValue + 'px',
						'height': item.height/radioValue + 'px',
						'left': item.elLeft/radioValue +'px',
						'top': item.elTop/radioValue +'px'
					}
				}
			})
	
			return {
				textConStyle,
				wordStyle,
				textItemStyle
			};
		},
	});
</script>

<style lang="less" scoped>
	
	.image_text_cover{
		width: 90px;
		height: 160px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back_con{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		&.single_image{
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
			background-image: var(--backImage);
		}
		
		&.couple_image_9_16{
			display: flex;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 50%;
			}
		}
		
		&.couple_image_16_9{
			display: flex;
			align-items: center;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 50%;
			}
		}
		&.couple_image_1_1{
			display: flex;
			align-items: center;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 50%;
			}
		}
		
		&.four_image_9_16{
			display: flex;
			flex-wrap: wrap;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 50%;
				width: 50%;
			}
		}
		
		&.four_image_1_1{
			display: flex;
			flex-wrap: wrap;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 50%;
				width: 50%;
			}
		}
	}
	
	.text_item{
		z-index: 9;
	}
</style>